import React from 'react'
import {Button, message, Spin, Table, Tabs} from 'antd'
import EditConfig from './EditConfig'
import {fetchPost} from '../../../utils/request'

const TabPane = Tabs.TabPane

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      key: 'FQGJ_PUBLIC',
      dataSource: [],
      loading: false
    }
  }

  getTable(key) {
    if (key !== this.state.key) {
      return ''
    }

    const columns = [{
      title: 'Key',
      dataIndex: 'key',
      key: 'name',
      width: 200,
      sorter: (a, b) => {
        return a.key.localeCompare(b.key)
      }
    }, {
      title: 'Value',
      dataIndex: 'value',
      key: 'value'
    }, {
      title: 'Comment',
      dataIndex: 'comment',
      key: 'comment',
      width: 200
    }, {
      title: 'GmtCreate',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      width: 150
    }, {
      title: 'GmtModified',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      width: 150
    }, {
      title: 'Edit',
      key: 'action',
      width: 100,
      render: (text, record) => {
        return (
          <EditConfig record={record} onReload={() => this.tabChange(this.state.key)}/>
        )
      }
    }]
    return (
      <div>
        <Table dataSource={this.state.dataSource} pagination={false} columns={columns} bordered size='small'/>
      </div>
    )
  }

  tabChange(key) {
    this.setState({
      key: key,
      loading: true
    })
    // 获取数据  更改database
    fetchPost(`/dbConfig/list/${key}`).then((res) => {
      if (res.code === 0) {
        this.setState({
          dataSource: res.data.list,
          loading: false
        })
      } else {
        this.setState({
          loading: false
        })
        message.error(res.msg)
      }
    })
  }

  componentWillMount() {
    this.tabChange(this.state.key)
  }

  reloadConfig() {
    fetchPost('/dbConfig/reload').then(json => {
      if (json.code === 0) {
        message.success('Success')
      } else {
        message.error(json.msg)
      }
    })
  }

  render() {
    return (
      <div>
        <Button style={{margin: 10}} type='primary' icon='reload' onClick={() => this.reloadConfig()}>Reload
          Config</Button>
        <Spin spinning={this.state.loading} delay={500}>
          <Tabs defaultActiveKey='FQGJ_PUBLIC' tabPosition='top' type='card' onChange={(key) => this.tabChange(key)}>
            <TabPane tab='cashmama-app-rest' key='cashmama-app-rest'>{this.getTable('cashmama-app-rest')}</TabPane>
            <TabPane tab='dhanaDhan-api' key='dhanaDhan-api'>{this.getTable('dhanaDhan-api')}</TabPane>
            <TabPane tab='open-api' key='open-api'>{this.getTable('open-api')}</TabPane>
            <TabPane tab='cashmama-admin-rest' key='cashmama-admin-rest'>{this.getTable('cashmama-admin-rest')}</TabPane>
            <TabPane tab='cashmama-trade' key='cashmama-trade'>{this.getTable('cashmama-trade')}</TabPane>
            <TabPane tab='cashmama-pay' key='cashmama-pay'>{this.getTable('cashmama-pay')}</TabPane>
            <TabPane tab='cashmama-user' key='cashmama-user'>{this.getTable('cashmama-user')}</TabPane>
            <TabPane tab='cashmama-product' key='cashmama-product'>{this.getTable('cashmama-product')}</TabPane>
            <TabPane tab='bo-api' key='bo-api'>{this.getTable('bo-api')}</TabPane>
            <TabPane tab='cashmama-post-lending' key='cashmama-post-lending'>{this.getTable('cashmama-post-lending')}</TabPane>
            <TabPane tab='PUBLIC' key='FQGJ_PUBLIC'>{this.getTable('FQGJ_PUBLIC')}</TabPane>
            <TabPane tab='SYSTEM_PUBLIC' key='SYSTEM_PUBLIC'>{this.getTable('SYSTEM_PUBLIC')}</TabPane>
          </Tabs>
        </Spin>
      </div>
    )
  }
}

export default Index
